<template>
  <view class="authorize-wrapper3">
    <view v-for="(item, index) in faguiList" :key="index" class="top-top-hangye" @click="hangyeClick(item)">
      <view class="hangye-m">
        <view style="display: flex;flex-direction: column;justify-content: space-between;width:100%;">
          <view class="hangye-title">{{ item.name }}</view>
          <view class="hangye-title2">{{ item.remark }}</view>
        </view>
        <!-- <view class="top-hangye">阅读量：{{ item.browseNum }}</view> -->
        <view class="hangye-img">
          <image class="hangye-img2" :src="item.icon" />
        </view>
      </view>
      <view style="width:100%;height:1px;background-color:#E5E5E5" />
    </view>
  </view>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState(["settings"]),
  },
  data() {
    return {
      faguiList: [
        {
          articleTitle: "山东高速集团诚聘精英",
          info: "山东高速阿尔及利亚有限公司",
          dta: "2018-05-11",
          mainPictureUrl: "/publicWelfare/img/bz.png",
        },
        {
          articleTitle: "我们缺个同事，我看你行！",
          info: "山东华杰人力资源管理有限公司成立于2007年，总部位于山东济南人力资源服务产业园",
          dta: "2018-05-11",
          mainPictureUrl: "/publicWelfare/img/bz.png",
        },
        {
          articleTitle: "大型商业银行招聘启事 招商银行济南分行",
          info: "1.职位描述：负责现金整点及清分工作。2.招聘条件：年龄在35周岁（含）以下",
          dta: "2018-05-11",
          mainPictureUrl: "/publicWelfare/img/bz.png",
        },
        {
          articleTitle: "山东水发环保集团有限公司招聘启事",
          info: "山东水发环保集团有限公司是山东水务发展集团有限公司旗下的全资国有独资公司之一",
          dta: "2018-05-11",
          mainPictureUrl: "/publicWelfare/img/bz.png",
        },
      ],
    };
  },
  onLoad: function (option) {
    this.faguiList = JSON.parse(decodeURIComponent(option.item));
  },
  methods: {
    hangyeClick(data) {
      if (data.link && data.link.indexOf("mp.weixin.qq.com") !== -1) {
        uni.setStorageSync("content", data.link);
        uni.navigateTo({
          url: `/webView/index`,
        });
      }
    },
  },
};
</script>

<style lang="scss">
.top-top-hangye {
  width: 100%;
  // background: #aaffff;
  flex-direction: column;
  // border-radius: 10px;
  display: flex;
  align-items: center;
  // margin-bottom: 12px;
  // justify-content: space-between;
}
.hangye-img {
  display: flex;
  align-items: center;
  width: 123px;
  margin-left: 5px;
  height: 100%;
  .hangye-img2 {
    border-radius: 10%;

    width: 123px;
    height: 68px;
  }
}
.hangye-m {
  height: 100%;
  width: 100%;
  flex-direction: row;
  display: flex;
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 10px;
  padding-bottom: 10px;
  justify-content: space-between;
}
.hangye-title {
  margin-bottom: 7px;
  font-size: 16px;
  color: #222426;
}
.hangye-title2 {
  font-size: 13px;
  color: #9c9c9c;
}
.hangye-img {
  display: flex;
  align-items: center;
  width: 123px;
  height: 100%;
  .hangye-img2 {
    border-radius: 10%;

    width: 123px;
    height: 68px;
  }
}

.authorize-wrapper3 {
  @include full-flex;
  background-color: $white;
  display: flex;
  flex-direction: column;
  align-items: center;
}
</style>